<template>
	<div
		:style="isPC() && 'width:160px'"
		class="bg-[#1b2538] w-[12rem] h-[225px] flex flex-col justify-between items-center rounded-lg p-[12px] cursor-pointer">
		<div class="flex justify-between w-full">
			<div :style="'font-size: 12px;' + (item.bonusStatus != 1 && 'visibility: hidden')">
				{{ $t('activity.rewards.remainingDays', { days: item.day }) }}
			</div>
			<base-icon
				color="#96A5AA"
				name="about"
				class="cursor-pointer text-bg-3"
				size="14"
				@click.stop="onClickHelp" />
		</div>
		<div class="flex flex-col gap-2 items-center">
			<base-image :src="'activity/reward/' + item.icon" class="h-[50px]" />
			<div style="transform: translateY(18px)">{{ item.title }}</div>
			<div v-if="item.extra" style="color: #00bd79; transform: translateY(10px)">
				{{ item.extra }}
			</div>
		</div>

		<div class="w-full">
			<base-button
				type="primary"
				:disabled="item.btnDisabled"
				class="w-[120px] px-[28px] h-[36px] text-white cursor-pointer text-[14px] app-font-normal rounded-[99px]"
				@click.stop="onClick(item)">
				<slot name="action-text">
					{{ item.btnText }}
				</slot>
			</base-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { BaseIcon, BaseImage, BaseButton } from '@/components/base'
import { isPC } from '@/utils'

defineProps({
	item: {
		type: Object as any,
		required: true
	},
	onClick: {
		type: Function,
		required: true
	}
})
const onClickHelp = () => {
	window.open('https://helpcenter.2uplivechat.com/en/articles/8851312-2up-privacy-policy', '_blank')
}
</script>

<style scoped></style>
